<script setup>
import { ref } from "vue"
import MyLink from "./components/MyLink.vue"
import { useRouter } from "vue-router"

/* 
  编程式导航
    - 通过js代码，完成路由的跳转
*/
const router = useRouter() // 获取路由的实例

/* 
  router.push()
    - 跳转路由
    - RouterLink底层就是调用调用的push
    - push()的参数和RouterLink的to是一样
  router.replace()
    - 跳转路由
    - 无法通过回退按钮
  router.go()
    - 跳转历史记录
*/

const clickHandler = () => {
  // router.push({ path: "/about", query: { name: "猪八戒" } })
  // router.replace("/about")
  router.go(1)
}
</script>

<template>
  <button @click="clickHandler">点我一下</button>
  <hr>
  <RouterLink :to="{ path: '/home', query: { name: '孙悟空' } }">
    Home
  </RouterLink>
  --
  <RouterLink to="/about">about</RouterLink>
  --
  <RouterLink to="/about?name=111">about</RouterLink>
  --
  <!-- <RouterLink to="/users/123">用户</RouterLink> -->
  <!-- 如果需要通过to的对象来设置路由信息，params必须配合name使用 -->
  <!-- <RouterLink :to="{ name: 'hello', params: { id: 'abc' } }"> 用户 </RouterLink> -->
  <RouterLink to="/users"> 用户 </RouterLink>--
  <RouterLink to="/users/info"> 用户info </RouterLink>--
  <RouterLink to="/users/list"> 用户list </RouterLink> --

  <!-- 
      router-link-active
        - 当url地址，和router-link执行的地址匹配时
            vue-router会自动为元素设置class router-link-active
        - 所以我们可以通过该类来为匹配的元素设置样式
        - 通过active-class 可以手动指定类名
        - 当子路由路径匹配时，也会添加这个class

      router-link-exact-active
        - 必须是完全匹配时才会为元素添加该类
        - 可以通过exact-active-class来指定类名
   -->
  --
  <!-- <RouterLink :to="{ name: 'info' }"> 用户info </RouterLink> -->
  --
  <RouterLink to="/hello/沙和尚">重定向</RouterLink>

  <hr />
  <MyLink tag="button" to="/about">自定义link</MyLink>
  --
  <MyLink to="https://www.lilichao.com">外部链接</MyLink>
  <hr>

  <RouterView></RouterView>


  <RouterView name="footer"></RouterView>
</template>

<style scoped>
.router-link-active {
  background-color: skyblue;
}

.router-link-exact-active {
  background-color: yellow;
}
</style>
